<template>
    <div class="account">
        <div class="input-list flex-between">
            <div class="label">支付宝名字</div>
            <input type="text" placeholder="请输入支付宝名字" v-model="aname">
        </div>
        <div class="input-list flex-between">
            <div class="label">支付宝账户</div>
            <input type="text" placeholder="请输入支付宝账户" v-model="aAccount">
        </div>
        <div class="upload">
            <div class="label">上传微信收款码</div>
            <div class="upload-box flex-center">
                <div>
                    <img src="../../assets/img/camera.png" alt="">
                    <p>上传二维码</p>
                </div>
                <img :src="image" alt="" v-if="image">
                <input type="file" accept="image/*" @change="upload">
            </div>
        </div>
        <button class="btn" @click="submit">提交</button>
    </div>
</template>

<script>
    export default {
        name: "bindAccount",
        data(){
            return {
                image:"",
                aname:"",
                aAccount:"",
            }
        },
        mounted(){
           this.getUser()
        },
        methods:{

            getUser(){
                this.$http.post('user/getUserInfo',{}).then(res=>{
                    console.log(res)
                    this.image = res.data.wechatqrcode;
                    this.aname = res.data.alipayname;
                    this.aAccount = res.data.alipayaccount;
                    this.$store.dispatch('changeUser',res.data)
                })
            },
            upload(e){
                let file = e.target.files[0]
                let reader = new FileReader();
                reader.readAsDataURL(file)
                reader.onload = res => {
                    this.$http.post('uploads/image',{
                        base64:res.target.result
                    }).then(res1=>{
                        this.image = res1.data;
                    })
                }
            },
            submit(){
                if(!this.aname && !this.aAccount){
                    this.$toast("参数不能为空");
                    return
                }
                if(!this.image){
                    this.$toast("微信收款码不能为空");
                    return;
                }
                this.$http.post("user/setUserDraw",{
                    aliname:this.aname,
                    aliaccount:this.aAccount,
                    wechat:this.image
                }).then(res=>{
                    console.log(res)
                    this.$toast(res.msg)
                    if(res.code == 1){
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },500)
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .account{
        background: white;
        height: calc(100vh - 90px);
        padding: 0 30px;
        .input-list{
            border-bottom: 2px solid #eee;
            .label{
                font-size: 30px;
                color: #666666;
            }
            input{
                height: 109px;
                width: 400px;
                text-align: right;
                font-size: 30px;
            }
        }
        .upload{
            .label{
                font-size: 30px;
                color: #666666;
                padding: 30px 0;
            }
            .upload-box{
                width: 200px;
                height: 200px;
                background-color: #f9f9f9;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                div{
                    text-align: center;
                    p{
                        font-size: 24px;
                        color: #999999;
                        margin-top: 5px;
                    }
                }
                &>img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height:100%;
                    object-fit: cover;
                    background: white;
                }
                input{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height:100%;
                    z-index: 1;
                    opacity: 0;
                }
            }
        }
        .btn{
            position: fixed;
            left: 0;
            bottom:0;
            width: 100%;
            height: 98px;
            background-color: #185fff;
            color:white;
            font-size: 32px;
        }
    }
</style>
